<template>
    <div>
        <el-button size="small" type="primary" @click="cliAddNews" class="mb5"
        >
            新建群发消息
        </el-button>
        <el-table :data="tempList" border class="wPer100">
            <el-table-column prop="id" label="消息id" width="65">
            </el-table-column>
            <el-table-column prop="title" label="标题" width="120">
            </el-table-column>
            <el-table-column prop="introduce" label="介绍">
            </el-table-column>
            <!-- <el-table-column prop="url" label="链接">
            </el-table-column> -->
            <!-- <el-table-column label="未/已群发" width="85">
              <template slot-scope="scope">
                {{ 
                    scope.row.status == '1' ? '未群发' :
                    scope.row.status == '2' ? '已群发' : scope.row.status
                }}
              </template>
            </el-table-column> -->
            <el-table-column prop="is_no_read_count" label="未读人数" width="80">
            </el-table-column>
            <el-table-column prop="is_read_count" label="已读人数" width="80">
            </el-table-column>
            <el-table-column prop="date" label="创建时间" width="160">
            </el-table-column>
            <el-table-column label="操作" width="110">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" class="mb5"
                        :disabled="(scope.row.status == 1 && scope.row.is_del == 1) ? false : true"
                        @click="cliMassHairBtn(scope.row.id)"
                    >
                        {{ 
                            scope.row.status == '1' ? '群发' :
                            scope.row.status == '2' ? '已发' : scope.row.status
                        }}
                    </el-button>
                    <el-button size="mini" type="warning" class="mb5"
                        @click="cliLookOverBtn(scope.row.content)"
                    >
                        查看
                    </el-button>
                    <el-button size="mini" type="danger"
                        :disabled="scope.row.is_del == 1 ? false : true"
                      @click="cliDelBtn(scope.row.id)"
                    >
                      {{
                            scope.row.is_del == 1 ? '删除' :
                            scope.row.is_del == 2 ? '已删' : scope.row.is_del
                      }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="floRight mt30 pb40">
            <el-pagination :current-page="currentPage" :total="total1"
                :page-sizes="[10]" :page-size="pageSize"
                background layout="prev, pager, next, total, jumper"
                @current-change="handleCurrentChange"
            />
        </div>
        <el-dialog title="新建群发消息" :visible.sync="dialogFormVisible1" width="90%">
            <div class="mb14">
                <el-form :model="distributorData1" status-icon
                    :rules="distributorRules1" ref="distributorData1" label-width="100px"
                >
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                            <el-form-item label="标题：" prop="title">
                                <el-input v-model="distributorData1.title" size="small"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                            <el-form-item label="介绍：" prop="introduce">
                                <el-input v-model="distributorData1.introduce" size="small"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                            <el-form-item label="消息类型：" prop="type">
                                <el-select v-model="distributorData1.type" placeholder="请选择"
                                    size="small"
                                >
                                    <el-option label="系统通知" value="1">
                                    </el-option>
                                    <el-option label="会员消息" value="3">
                                    </el-option>
                                    <el-option label="商品通知" value="4">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <!-- <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8"
                        >
                        v-if="distributorData1.type == 4"
                            <el-form-item label="商品链接：" prop="url">
                                <el-input v-model="distributorData1.url" size="small"
                                ></el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
                        >
                        <!-- v-if="distributorData1.type != 4" -->
                            <el-form-item prop="content" label-width="0">
                                <introduction v-model="distributorData1.content"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="teAliCenter">
                            <el-form-item>
                                <el-button type="primary" @click="subDistributor1()"
                                size="small" class="mr5"
                                >
                                    提交
                                </el-button>
                                <el-button @click="resetDistributor('distributorData1')" size="small">
                                    重置
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog title="群发消息-富文本内容" :visible.sync="dialogFormVisible2" width="434px">
            <div class="overYS maxH375">
                <div class="previewFrame bor1SCcc"
                    v-html="rowContent"
                >
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import introduction from '@/components/introduction'
import { createMessage, isDelMessage, massHometexting,
    getHomeMessageList } from '@s/api'
import timeFormat from "@u/timeFormat";
export default {
    components: { introduction },
    data() {
        let titleCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入标题'));
          } else {
            callback();
          }
        };
        let introduceCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入介绍'));
          } else {
            callback();
          }
        };
        let contentCheck = (rule, value, callback) => {
        //   if (value === '' && this.distributorData1.type != 4) {
        //     callback(new Error('请输入富文本内容'));
        //   } else {
            callback();
        //   }
        };
        // let urlCheck = (rule, value, callback) => {
        // //   if (value === '' && this.distributorData1.type == 4) {
        // //     callback(new Error('请输入商品链接'));
        // //   } else {
        //     callback();
        // //   }
        // };
        return {
            dialogFormVisible1: false,
            distributorData1: {
                title: '', introduce: '', content: '', //url: '', type: '1'
            },
            distributorRules1: {
                title: [{ validator: titleCheck, trigger: 'blur' }],
                introduce: [{ validator: introduceCheck, trigger: 'blur' }],
                content: [{ validator: contentCheck, trigger: 'blur' }],
                // url: [{ validator: urlCheck, trigger: 'blur' }],
            },
            currentPage: 1,
            pageSize: 10,
            tempList: [],
            total1: 0,
            dialogFormVisible2: false, rowContent: '',

        }
    },
    mounted() {
        this.getDataList1();
    },
    methods: {
        cliAddNews() {
            this.dialogFormVisible1 = true;
        },
        subDistributor1() {
            this.$refs['distributorData1'].validate(valid => {
                if (valid) {
                    createMessage({
                        token: this.$store.getters.token,
                        title: this.distributorData1.title,
                        introduce: this.distributorData1.introduce,
                        // type: this.distributorData1.type,
                        // content: (this.distributorData1.type != 4 ? this.distributorData1.content : ''),
                        content: this.distributorData1.content,
                        // url: (this.distributorData1.type == 4 ? this.distributorData1.url : '')
                        // url: this.distributorData1.url
                    }).then(res => {
                        this.$message({ type: "success", message: '新建成功' });
                        this.getDataList1();
                        this.distributorData1.title = '';
                        this.distributorData1.introduce = '';
                        this.distributorData1.content = '';
                        // this.distributorData1.url = '';
                        this.dialogFormVisible1 = false;
                    })
                }
            })
        },
        resetDistributor(formName) {
            this.$refs[formName].resetFields();
        },
        getDataList1() {
            getHomeMessageList({
                token: this.$store.getters.token,
                page: this.currentPage - 1,
                number: this.pageSize
            }).then(res => {
                this.tempList = res.data.data;
                this.tempList.forEach(item => {
                    item.date = timeFormat.formatTime(item.date * 1000);
                })
                this.total1 = res.data.count;
            })
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.getDataList1();
        },
        cliMassHairBtn(id) {
            console.log(id)
            this.$confirm('确定群发这条消息？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消', type: 'warning'
            }).then(() => {
                massHometexting({
                    token: this.$store.getters.token, id
                }).then(res => {
                    this.$message({ type: 'success', message: '群发成功' });
                    this.getDataList1();
                })
            }).catch(() => { });
        },
        cliLookOverBtn(rowContent) {
            this.rowContent = rowContent;
            this.dialogFormVisible2 = true;
        },
        cliDelBtn(id) {
            this.$confirm('确定删除这条消息？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消', type: 'warning'
            }).then(() => {
                isDelMessage({
                    token: this.$store.getters.token, id
                }).then(res => {
                    this.$message({ type: 'success', message: '删除成功' });
                    this.getDataList1();
                })
            }).catch(() => { });
        }
    }
}
</script>
<style>
.el-button+.el-button {margin-left: 0;}
.previewFrame img {max-width: 100%;}
</style>